<template>
  <el-card>
      <el-form label-position="left"label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="货单编号">
              <label>{{editForm.code}}</label>
            </el-form-item>
            <el-form-item label="订单号">
             <label> {{editForm.orderId}}</label>
            </el-form-item>
            <el-form-item label="状态">
             <label> {{editForm.status}}</label>
            </el-form-item>
            <el-form-item label="承运人">
              <label> {{editForm.courierName}}</label>
            </el-form-item>
            <el-form-item label="接单时间">
             <label> {{editForm.pickedAt}}</label>
            </el-form-item>
            <el-form-item label="发货时间">
              <label> {{editForm.shippedAt}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货时间">
              <label> {{editForm.completedAt}}</label>
            </el-form-item>
            <el-form-item label="创建时间">
              <label> {{editForm.createdAt}}</label>
            </el-form-item>
            <el-form-item label="收货人姓名">
              <label> {{editForm.receiverName}}</label>
            </el-form-item>
            <el-form-item label="联系方式">
              <label> {{editForm.receiverPhone}}</label>
            </el-form-item>
            <el-form-item label="收货地址">
              <label> {{editForm.receiverAddress}}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button @click="edit()">修改联系人信息</el-button>
        <el-button @click="back()">返回</el-button>
      </el-form>
  </el-card>
</template>
<style>
.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
<script>

   export default{
    created() {
      this.loadGridData()
    },
    data(){
       return{
         editForm:{
          code:'',
          orderId:'',
          status:'',
          courierName:'',
          pickedAt:'',
          shippedAt:'',
          completedAt:'',
          createdAt:'',
          receiverName:'',
          receiverPhone:'',
          receiverAddress:''
         },
       }
    },
    methods: {
      loadGridData() {
        let orderId=this.$route.params.orderId;
        this.axios.get(`shipments/${orderId}`).then(response =>{
          this.editForm=response.data
        })
      },
      back(){
        this.$router.push("/shipments")
      },
      edit(){
         let orderId=this.$route.params.orderId;
         this.$router.push(`/shipments/${orderId}/edit`)
      }
    }
   }

</script>
